<template>
  <div class="content">
    <h1>校招直播</h1>
    <div class="video swiper-school-live">
      <div class="live-list clearfix">
        <a
          class="live-item"
          target="_blank"
          ka="school_streaming_0_click"
          data-id="dd1df373fc88a02a1nJ739q-"
        >
          <span class="live-time">直播时间 03.20 15:00</span>
          <span class="live-item-tag notice">预告</span>
          <img
            class="live-image"
            src="https://img.bosszhipin.com/beijin/upload/school/live/20230309/b93206e5b50f9083f4726460fe45131773a41dbd705216886bb61e3b7bce0931da574d19d1d82c88.jpg?x-oss-process=image/watermark,image_YmVpamluL21jcy9jaGF0cGhvdG8vMjAxNjEwMDcvNTViYmJlNDk4Nzk4N2JhZWE1MDY2MzAzM2IyYmJiMzk5NzNjOTQ5NjhmYmZjZTE2NWE2M2Y4Zjk3ZjU1NzI0Ni5qcGc_eC1vc3MtcHJvY2Vzcz1pbWFnZS9yZXNpemUsd18xOTIsbGltaXRfMC9yb3VuZGVkLWNvcm5lcnMscl8xOA==,g_se,x_84,y_114/watermark,image_YmVpamluL2ljb24vNzczZjhmYThlNjdkNTVhODM2ODQ0NzI5MjIzNTVkYjQ4Y2EyNmJlYWMxZWM2MTVjMDY4NjViY2Y3MTc1MzM2MS5wbmc=,g_sw,x_84,y_114,image/resize,p_50"
            alt=""
          />
          <div class="info-content">
            <span class="company-logo-box"
              ><img
                src="https://img.bosszhipin.com/beijin/mcs/chatphoto/20161007/55bbbe4987987baea50663033b2bbb39973c94968fbfce165a63f8f97f557246.jpg"
            /></span>
            <div class="info-main">
              <span>宁波海洋世界线上招聘</span>
              <p>水族动物养殖/水族动物饲养员等6个岗位</p>
            </div>
          </div>
        </a>
        <a
          class="live-item"
          target="_blank"
          ka="school_streaming_1_click"
          data-id="a001ed25f6aba8981nJ53N6_"
        >
          <span class="live-time">直播时间 03.20 15:00</span>
          <span class="live-item-tag notice">预告</span>
          <img
            class="live-image"
            src="https://boss-bj.oss-cn-beijing.aliyuncs.com/beijin/upload/school/live/20230316/b93206e5b50f90839b199b3366848c66e8b28f8b7aae7186830af106a1e20daa80ed5210bc6ab1d5?x-oss-process=image/resize,p_50"
            alt=""
          />
          <div class="info-content">
            <span class="company-logo-box"
              ><img
                src="https://img.bosszhipin.com/beijin/upload/school/live/20221101/b93206e5b50f9083954f525a19ed9612c90fe36d24e6533f9922a210725978f996dbf202eefa463f.png"
            /></span>
            <div class="info-main">
              <span>【传媒校招】大鹏学长带你把offer揣兜里</span>
              <p>新媒体运营（雇主品牌方向）等60个岗位</p>
            </div>
          </div>
        </a>
        <a
          class="live-item"
          target="_blank"
          ka="school_streaming_2_click"
          data-id="6e82051a97f0bec21nJ739q0"
        >
          <span class="live-time">直播时间 03.20 19:00</span>
          <span class="live-item-tag notice">预告</span>
          <img
            class="live-image"
            src="https://boss-bj.oss-cn-beijing.aliyuncs.com/beijin/upload/school/live/20230309/b93206e5b50f9083a2860a05fa7791ccd95f160ddf95729e92672550843b838388ba3cb2e13e0b4d?x-oss-process=image/resize,p_50"
            alt=""
          />
          <div class="info-content">
            <span class="company-logo-box"
              ><img
                src="https://img.bosszhipin.com/beijin/mcs/chatphoto/20201111/b030ccf7c6ae4bb7b1aed4514ce5868b477026d1a7d2a17b4f460ebdc6ac5c3c_s.jpg"
            /></span>
            <div class="info-main">
              <span>星火教育2023春季招聘</span>
              <p>学习规划师等19个岗位</p>
            </div>
          </div>
        </a>
        <a
          class="live-item"
          target="_blank"
          ka="school_streaming_3_click"
          data-id="96f643af3ab4f6561nJ-2t29"
        >
          <span class="live-time">直播时间 03.20 19:00</span>
          <span class="live-item-tag notice">预告</span>
          <img
            class="live-image"
            src="https://img.bosszhipin.com/beijin/upload/school/live/20230317/b93206e5b50f908339240e2555403f33973e12a80ab56bbd6bb61e3b7bce0931da574d19d1d82c88.jpg?x-oss-process=image/watermark,image_YmVpamluL3VwbG9hZC9jb20vd29ya2ZlZWwvMjAyMjA0MTQvN2JmNmYxNjA5NTA0MDVlOWI5YTc3YjRkMzViYTVmYWNlNjRhYjc4ZWFlZTM1Njc0YWMxODVkNDhmM2UxYzE1Y2VkMGMxZWQ3Nzk2ZmE3MjEuanBnP3gtb3NzLXByb2Nlc3M9aW1hZ2UvcmVzaXplLHdfMTkyLGxpbWl0XzAvcm91bmRlZC1jb3JuZXJzLHJfMTg=,g_se,x_84,y_114/watermark,image_YmVpamluL2ljb24vNzczZjhmYThlNjdkNTVhODM2ODQ0NzI5MjIzNTVkYjQ4Y2EyNmJlYWMxZWM2MTVjMDY4NjViY2Y3MTc1MzM2MS5wbmc=,g_sw,x_84,y_114,image/resize,p_50"
            alt=""
          />
          <div class="info-content">
            <span class="company-logo-box"
              ><img
                src="https://img.bosszhipin.com/beijin/upload/com/workfeel/20220414/7bf6f160950405e9b9a77b4d35ba5face64ab78eaee35674ac185d48f3e1c15ced0c1ed7796fa721.jpg"
            /></span>
            <div class="info-main">
              <span>联塑集团2023春季校招直播间</span>
              <p>平面设计实习生等18个岗位</p>
            </div>
          </div>
        </a>
        <a
          class="live-item"
          target="_blank"
          ka="school_streaming_4_click"
          data-id="d319cb2ccb6926641nJ52Ni1"
        >
          <span class="live-time">直播时间 03.20 20:00</span>
          <span class="live-item-tag notice">预告</span>
          <img
            class="live-image"
            src="https://boss-bj.oss-cn-beijing.aliyuncs.com/beijin/upload/school/live/20230315/b93206e5b50f908300c758b5a815802573aa5636e5e3710540c51ee9d90a7925789e0fe9ec96cbdd?x-oss-process=image/resize,p_50"
            alt=""
          />
          <div class="info-content">
            <span class="company-logo-box"
              ><img
                src="https://img.bosszhipin.com/beijin/upload/school/live/20230301/b93206e5b50f9083a9fc1c255a76248a76a30f99ac07fe1b9922a210725978f996dbf202eefa463f.png"
            /></span>
            <div class="info-main">
              <span>【星推官Vicky学姐】职能类专场</span>
              <p>（双休+六险一金）500强外企客服等64个岗位</p>
            </div>
          </div>
        </a>
        <a
          class="live-item"
          target="_blank"
          ka="school_streaming_5_click"
          data-id="9ae7f68c1c5fdcd81nJ539u6"
        >
          <span class="live-time">直播时间 03.20 20:00</span>
          <span class="live-item-tag notice">预告</span>
          <img
            class="live-image"
            src="https://boss-bj.oss-cn-beijing.aliyuncs.com/beijin/upload/school/live/20230315/b93206e5b50f90835734b44ed325bbbf38d1e4dbda0830a08475720c97662751962b4e11de343360?x-oss-process=image/resize,p_50"
            alt=""
          />
          <div class="info-content">
            <span class="company-logo-box"
              ><img
                src="https://img.bosszhipin.com/beijin/upload/school/live/20230301/b93206e5b50f9083a9389816cfbb60879bb7f084d515328f9922a210725978f996dbf202eefa463f.png"
            /></span>
            <div class="info-main">
              <span>【鹏飞学长】半导体、硬件技术专场</span>
              <p>测试工程师（初级/中级/高级，上市公司）等69个岗位</p>
            </div>
          </div>
        </a>
        <a
          class="live-item"
          target="_blank"
          ka="school_streaming_6_click"
          data-id="68cf2a2f4629e61b1nJ53ty4"
        >
          <span class="live-time">直播时间 03.20 20:00</span>
          <span class="live-item-tag notice">预告</span>
          <img
            class="live-image"
            src="https://boss-bj.oss-cn-beijing.aliyuncs.com/beijin/upload/school/live/20230315/b93206e5b50f90830f427aed25549badb6105d3d6d844f6e4e47e23479c5ee78d32cbbd01c58c600?x-oss-process=image/resize,p_50"
            alt=""
          />
          <div class="info-content">
            <span class="company-logo-box"
              ><img
                src="https://img.bosszhipin.com/beijin/upload/school/live/20230301/b93206e5b50f9083c8381a0bde0cd7d88e57ead1330011c99922a210725978f996dbf202eefa463f.png"
            /></span>
            <div class="info-main">
              <span>【生产制造行业】校招专场</span>
              <p>美的高薪聘调机工艺员/上下模/加料等52个岗位</p>
            </div>
          </div>
        </a>
        <a
          class="live-item"
          target="_blank"
          ka="school_streaming_7_click"
          data-id="80a36c41baeba5ac1nJ53Nm6"
        >
          <span class="live-time">直播时间 03.20 20:00</span>
          <span class="live-item-tag notice">预告</span>
          <img
            class="live-image"
            src="https://boss-bj.oss-cn-beijing.aliyuncs.com/beijin/upload/school/live/20230316/b93206e5b50f90830a2c48641d5196f4e689db43358ac70a830af106a1e20daa80ed5210bc6ab1d5?x-oss-process=image/resize,p_50"
            alt=""
          />
          <div class="info-content">
            <span class="company-logo-box"
              ><img
                src="https://img.bosszhipin.com/beijin/upload/school/live/20230216/b93206e5b50f9083426bb5bf51e60fab08de5e0b64956eea9922a210725978f996dbf202eefa463f.png"
            /></span>
            <div class="info-main">
              <span>【Percy】互联网运营专场</span>
              <p>淘宝店长运营等19个岗位</p>
            </div>
          </div>
        </a>
      </div>
    </div>

    <div class="jobs-clock">
      <h1>热门校招</h1>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane
          :label="item"
          :name="item"
          v-for="item in names"
        ></el-tab-pane>
      </el-tabs>
      <div class="jobs">
        <div class="each-job" v-for="item in filterData" @click="toDetail(item)">
          <div class="flex-between" style="padding: 10px 20px 10px 20px;">
            <div>{{item.jobName}}</div>
            <div style="color: red;">{{item.salary}}</div>
          </div>
          <div class="tags flex-center" style="padding: 0 20px 10px 20px">
            <div class="tag" v-for="tag in item.tags">{{tag}}</div>  
          </div>
          <div class="company">
            <div>{{item.publisherInfo.companyName}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getUserInfo, getJob, addSquare } from "../service.js";
export default {
  name: "publish",
  mounted() {
    // 查询个人资料
    if (localStorage.getItem("meiyaWebInfo")) {
      this.userInfo = JSON.parse(localStorage.getItem("meiyaWebInfo"));
      getUserInfo(this.userInfo._id).then((res) => {
        this.userInfo = res.data;
      });
    }
    this.getJobFun();
  },
  data() {
    return {
      userInfo: {},
      names: ["全部", "全职", "兼职", "校招"],
      activeName: "全部",
      allData: [],
      filterData: [],
    };
  },
  methods: {
    getJobFun() {
      getJob().then(async (res) => {
        this.allData = res.data;
        for (let item of res.data) {
          item.tags = JSON.parse(item.tags)
          if (item.publisherId) {
            let user = await getUserInfo(item.publisherId);
            item.publisherInfo = user.data;
          }
        }
        this.handleClick();
      });
    },
    handleClick() {
      if (this.activeName !== "全部") {
        this.filterData = this.allData.filter(
          (v) => v.category === this.activeName
        );
      } else {
        this.filterData = this.allData;
      }
    },
    toDetail(data) {
      this.$router.push({
        name: 'job',
        params: data
      })
    }
  },
};
</script>

<style lang="scss" scoped>
h1 {
  text-align: center;
  margin: 30px auto;
}
.content {
  width: 1400px;
  margin: 0 auto;
  min-height: 80vh;
  padding: 20px;
}
.pagination {
  text-align: center;
  margin-top: 30px;
}

.jobs {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  transition: all .2s linear;
  border-radius: 12px;
  .each-job {
    background: #e9f1f0;
    width: 22%;
    margin-bottom: 10px;
    cursor: pointer;
    .company {
      padding: 10px 20px;
      background: linear-gradient(90deg,#f5fcfc 0,#fcfbfa 100%);
    }
  }

  .each-job:hover {
    position: relative;
    z-index: 1;
    box-shadow: 0 16px 40px 0 rgba(153,153,153,.3);
  }
}
</style>
